<template lang="">

  <div class="login_container">
    <div class="login_box">
      <div class="login-title">学生宿舍管理系统</div>
      <el-form :model="loginForm" :rules="loginFormRlues" label-width="0px" class="login_form">
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            prefix-icon="iconfont icon-gerentouxiang" placeholder="请输入账号"
          ></el-input>
        </el-form-item>

        <el-form-item prop="password" >
          <el-input
            v-model="loginForm.password"
            prefix-icon="iconfont icon-denglumima" placeholder="请输入密码" type="password"
          ></el-input>
        </el-form-item>

        <el-form-item class="btns">
          <el-button type="primary" class="login" @click="doLogin">登录</el-button>
          <router-link to="/UserRegister">  <el-button type="primary">立即注册</el-button></router-link>
        </el-form-item>
      </el-form>
    </div>
   

    
  </div>

  
</template>
<script>

export default {
    name:"UserLogin",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        },
        //表单规则验证对象
        loginFormRlues: {
            username: [{ required: true, message: '请输入登录账号', trigger: 'blur' },
             { min: 3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur' }],
            password: [{ required: true, message: '请输入登录密码', trigger: 'blur' },
             { min: 3, max: 15, message: '长度在 3 到 15个字符', trigger: 'blur' }]
      }
    };
  },

  methods: {
    UserLogin() {
      this.$router.replace('/student_dormitory_managementciews/BuildingInformationManagement/BuildingInformation.vue')
      },
     doLogin() {
         if (!this.loginForm.username) {
        //   *！绑定的名称
        this.$message.error("请输入账号！");
        return;
         } else if (!this.loginForm.password) {
             this.$message.error("请输入密码！");
             return;
         }
        
        //  } else if (this.loginFormRlues.username) {
        //      console.log(this.loginFormRlues.username);
        // this.$message.error("账号长度在 3 到 10个字符!");
           
        //      return;
        //  }
        //  else if (!this.loginFormRlues.password.$message <3 || this.loginFormRlues.password.$message > 15) {
        //          this.$message.error("密码长度在 3 到 15个字符!");
        //      return;
        //  }

        else {
        //校验用户名和密码是否正确;
           this.$router.push({ path: "/builidinformation" });
      {
             this.$message({
          message:'登录成功!',
           showClose: true,
          type: 'success'
        });
      }
   
       }
        
      
    }
  }


};
</script>
<style lang="less" scoped>
.login_container {
  height: 100%;
  width: 100%;

	background: url(../assets/sushe.jpg) no-repeat fixed center;
  
	min-height: 100vh;
	background-size: cover;
}
.login_box {
  width: 450px;
  height: 300px;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0);
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.7);
	border-radius: 10px;
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: flex-end;
}
.el-button{
  background-color:rgb(75, 62, 62);
}
.el-button:hover{
  background-color: rgba(255, 255, 255, 0);

}
.login-title{

  position: absolute;
  left: 34%;
  top: 5%;

  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-style: Arial;
  font-size: 20px;
  font-weight: bold;
  color:#fff;

}
.login{
    margin:20px;
    .login {
	.el-input--prefix {
		.el-input__prefix {
			left: 10px;
		}

		.el-input__inner {
			padding-left: 35px;
			padding-right: 35px;
		}
	}

	.el-form-item__label,
	.el-checkbox__label {
		color: #fff;
	}

	.el-button {
		display: block;
		width: 100%;
	}
}
}
</style>
